<template>
  <div id="purposeFeeItemDiv">
    <Breadcrumb content="申请项目对照检验目的" />
    <div class="bodyContent">
      <Splitpanes>
        <!-- 左侧表格  -->
        <Pane size="25">
          <vxe-toolbar perfect>
            <template #buttons>
              <div class="smallToolTitle">
                检验目的</div>
              <vxe-input style="width: 180px" v-model="searchForm.searchValue" type="search" clearable class="vxeInputSearch" placeholder="关键字查询" @clear="findPurposeList" @keyup="keyupEnter" @search-click="findPurposeList()"></vxe-input>

              <vxe-button type="text" class="button-blue" icon="vxe-icon-refresh" content="刷新" :loading="tloading" @click="findPurposeList"></vxe-button>

            </template>
          </vxe-toolbar>
          <div class="tableBody">
            <vxe-table ref="purposeTableRef" class="mytable-scrollbar supplierTableClazz" border="inner" align="left" height="auto" :data="purposeList" :loading="tloading" @current-change="purposeRowClick" :row-config="{ isCurrent: true, isHover: true }" :column-config="{ resizable: true }" resizable show-overflow keep-source>
              <vxe-column field="seq" title="序号" width="80"></vxe-column>
              <vxe-column field="purposeNo" title="检验目的代码" width="80"></vxe-column>
              <vxe-column field="purposeName" title="检验目的名称" width="150">
              </vxe-column>
              <vxe-column field="inputCode" title="助记符">
              </vxe-column>
            </vxe-table>
          </div>
        </Pane>
        <!-- 右侧表单 -->
        <Pane size="20">
          <vxe-toolbar perfect>
            <template #buttons>
              <div class="smallToolTitle">
                标本类型</div>
              <vxe-input style="width: 180px" v-model="searchSampleTypeForm.searchValue" type="search" clearable class="vxeInputSearch" placeholder="关键字查询" @clear="findSampleTypeList" @keyup="keyupSampleTypeEnter" @search-click="findSampleTypeList()"></vxe-input>

              <vxe-button type="text" class="button-blue" icon="vxe-icon-refresh" content="刷新" :loading="sloading" @click="findSampleTypeList"></vxe-button>

            </template>
          </vxe-toolbar>
          <div class="tableBody">
            <vxe-table ref="sampleTypeTableRef" class="mytable-scrollbar supplierTableClazz" border="inner" align="left" height="auto" :data="sampleTypeList" :loading="sloading" @current-change="sampleTypeRowClick" :row-config="{ isCurrent: true, isHover: true }" :column-config="{ resizable: true }" resizable show-overflow keep-source>
              <vxe-column type="seq" title="序号" width="80"></vxe-column>
              <vxe-column field="sampleTypeCode" title="样本类型编码" width="80"></vxe-column>
              <vxe-column field="sampleTypeName" title="样本类型名称">
              </vxe-column>
            </vxe-table>
          </div>
        </Pane>
        <Pane size="30">
          <vxe-toolbar perfect>
            <template #buttons>
              <vxe-input style="width: 180px" v-model="searchPurposeItemForm.searchValue" type="search" clearable class="vxeInputSearch" placeholder="关键字查询" @clear="findPurposeItemList" @keyup="keyupPurposeItemEnter" @search-click="findPurposeItemList()"></vxe-input>
              <vxe-button type="text" class="button-blue" icon="vxe-icon-refresh" content="刷新" :loading="ploading" @click="findPurposeItemList"></vxe-button>
              <vxe-button type="text" icon="vxe-icon-delete" class="button-red" content="删除" @click="deleteBatchPurposeItem"></vxe-button>
              <div class="msgDiv">
                双击项目移除对应关系</div>

            </template>
          </vxe-toolbar>
          <div class="tableBody">
            <vxe-table ref="purposeItemTableRef" class="mytable-scrollbar supplierTableClazz" border="inner" align="left" height="auto" :data="purposeItemList" :loading="ploading" @cell-dblclick="purposeItemRowClick" :row-config="{ isCurrent: true, isHover: true }" :column-config="{ resizable: true }" resizable show-overflow keep-source>
              <vxe-column type="checkbox" width="30"></vxe-column>
              <vxe-column field="seq" title="序号" width="80"></vxe-column>
              <vxe-column field="feeItemName" title="申请项目">
              </vxe-column>
              <vxe-column field="purposeName" title="检验目的" width="80"></vxe-column>
              <vxe-column field="sampleTypeName" title="样本类型" width="150">
              </vxe-column>

            </vxe-table>
          </div>
        </Pane>
        <Pane size="25">
          <vxe-toolbar perfect>
            <template #buttons>
              <vxe-input style="width: 180px" v-model="searchFeeItemForm.searchValue" type="search" clearable class="vxeInputSearch" placeholder="关键字查询" @clear="findFeeItemList" @keyup="keyupFeeItemEnter" @search-click="findFeeItemList()"></vxe-input>
              <vxe-button type="text" class="button-blue" icon="vxe-icon-refresh" content="刷新" :loading="floading" @click="findFeeItemList"></vxe-button>
              <div class="msgDiv">
                双击项目添加对应关系</div>

            </template>
          </vxe-toolbar>
          <div class="rightTable">
            <vxe-table ref="feeItemTableRef" class="mytable-scrollbar supplierTableClazz" border="inner" align="left" height="auto" :data="feeItemList" :loading="floading" @cell-dblclick="feeItemRowClick" :row-config="{ isCurrent: true, isHover: true }" :column-config="{ resizable: true }" resizable show-overflow keep-source>
              <vxe-column type="seq" title="序号" width="30"></vxe-column>
              <vxe-column field="feeCode" title="项目编号" width="80"></vxe-column>
              <vxe-column field="feeName" title="项目名称" width="150">
              </vxe-column>
              <vxe-column field="shortName" title="项目简称">
              </vxe-column>
              <vxe-column field="price" title="单价">
              </vxe-column>
            </vxe-table>
          </div>
          <vxe-pager align="left" min-height="32px" height="32px" :current-page.sync="page.currentPage" :page-size.sync="page.pageSize" :total="page.totalResult" :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']" @page-change="handleSizeChange($event)"></vxe-pager>

        </Pane>
      </Splitpanes>
    </div>
  </div>
</template>
<script setup lang="ts">
// 引入组件区 ==========
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import Breadcrumb from '@/components/Breadcrumb.vue';
import { Splitpanes, Pane } from 'splitpanes';
let { proxy }: any = getCurrentInstance();
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage'; //提示框
import { isEmpty } from 'lodash';
import { funBdsJsResult } from '@/utils/Expression'; //函数公式
import { AppStore } from '@/stores/store';
let store = AppStore();
// 条数/页
const PageSizeList = [10, 50, 100, 200, 500];
// 分页
let page = reactive({
  currentPage: 1,
  pageSize: PageSizeList[1],
  totalResult: 0
});
let tloading = ref(false); //加载状态
let sloading = ref(false);
let floading = ref(false);
let ploading = ref(false);

let sltPurpose: any = ref({});
let sltSampleType: any = ref({});
let searchForm = {
  searchValue: ''
};
let searchSampleTypeForm = {
  searchValue: '',
  purposeNo: ''
};
let searchFeeItemForm = {
  searchValue: ''
};
let searchPurposeItemForm = {
  searchValue: ''
};
let purposeList: any = reactive([]);
let sampleTypeList: any = reactive([]);
let feeItemList: any = reactive([]);
let purposeItemList: any = reactive([]);

onMounted(() => {
  findPurposeList(); // 获取质控规则表格数据
});

// 回车查询
function keyupEnter(e: any) {
  if (e.$event.code == 'Enter') {
    findPurposeList();
  }
}
function keyupSampleTypeEnter(e: any) {
  if (e.$event.code == 'Enter') {
    findSampleTypeList();
  }
}

function keyupFeeItemEnter(e: any) {
  if (e.$event.code == 'Enter') {
    findFeeItemList();
  }
}
function keyupPurposeItemEnter(e: any) {
  if (e.$event.code == 'Enter') {
    findPurposeItemList();
  }
}

function findPurposeList() {
  tloading.value = true;
  purposeList.length = 0; //放入数据前清空数据
  const url = '/api/sta/staReqPurpose/findPurposeList';
  proxy.$http
    //注意此处的数据条数
    .get(url, {
      params: {
        seachValue: searchForm.searchValue
      }
    })
    .then((res: any) => {
      purposeList.push(...res.data);
      tloading.value = false;
      const kn = purposeList.find((k) => k.id == sltPurpose.value.id);
      if (isEmpty(kn)) {
        purposeRowClick({ row: purposeList[0] }); //默认选中第一条数据
      } else {
        purposeRowClick({ row: kn }); //默认选中第一条数据
      }
    })
    .catch((err: any) => {
      tloading.value = false;
      // VxeMessage('获取获取当前字典的规则列表失败',VxeNotifyType.error)
    });
}

function findSampleTypeList() {
  sloading.value = true;
  sampleTypeList.length = 0; //放入数据前清空数据
  const url = '/api/sta/staReqPurposeSampletype/findPurposeSampletypeList';
  proxy.$http
    //注意此处的数据条数
    .get(url, {
      params: {
        purposeNo: searchSampleTypeForm.purposeNo,
        seachValue: searchSampleTypeForm.searchValue
      }
    })
    .then((res: any) => {
      sampleTypeList.push(...res.data);
      sloading.value = false;
      const kn = sampleTypeList.find((k) => k.id == sltSampleType.value.id);
      if (isEmpty(kn)) {
        sampleTypeRowClick({ row: sampleTypeList[0] }); //默认选中第一条数据
      } else {
        sampleTypeRowClick({ row: kn }); //默认选中第一条数据
      }
    })
    .catch((err: any) => {
      tloading.value = false;
      // VxeMessage('获取获取当前字典的规则列表失败',VxeNotifyType.error)
    });
}
function findPurposeItemList() {
  ploading.value = true;
  purposeItemList.length = 0; //放入数据前清空数据
  const url = '/api/sta/staReqPurposeFeeItem/findPurposeFeeItemList';
  proxy.$http
    //注意此处的数据条数
    .get(url, {
      params: {
        searchValue: searchPurposeItemForm.searchValue,
        sampleTypeId: sltSampleType.value.sampleTypeCode,
        purposeId: sltPurpose.value.id,
        purposeNo: sltPurpose.value.purposeNo
      }
    })
    .then((res: any) => {
      purposeItemList.length = 0; //放入数据前清空数据
      purposeItemList.push(...res.data);
      ploading.value = false;
    })
    .catch((err: any) => {
      ploading.value = false;
      // VxeMessage('获取获取当前字典的规则列表失败',VxeNotifyType.error)
    });
}

function findFeeItemList() {
  floading.value = true;
  feeItemList.length = 0; //放入数据前清空数据
  const url = '/lis/fee/item/findFeeItemPageList';
  proxy.$http
    //注意此处的数据条数
    .get(url, {
      params: {
        keyWords: searchFeeItemForm.searchValue,
        sampleTypeId: sltSampleType.value.sampleTypeCode,
        purposeId: sltPurpose.value.purposeNo,
        pageIndex: page.currentPage,
        pageSize: page.pageSize
      }
    })
    .then((res: any) => {
      if (res.data && res.data.records.length > 0) {
        feeItemList.push(...res.data.records);
        page.totalResult = res.data.total;
      } else {
        page.totalResult = 0;
      }
      floading.value = false;
    })
    .catch((err: any) => {
      floading.value = false;
      // VxeMessage('获取获取当前字典的规则列表失败',VxeNotifyType.error)
    });
}

function handleSizeChange({ type, currentPage, pageSize }) {
  if (type === 'size') {
    page.currentPage = 1;
  } else {
    page.currentPage = currentPage;
  }
  page.pageSize = pageSize;
  findFeeItemList();
}

function purposeRowClick({ row }: any) {
  if (isEmpty(row)) {
    sltPurpose.value = {};
    purposeItemList.length = 0;
  } else {
    (proxy.$refs.purposeTableRef as any).setCurrentRow(row);
    sltPurpose.value = row;
    searchSampleTypeForm.purposeNo = row.purposeNo;
    //findBacReqPurposeFeeItem();
    findSampleTypeList();
  }
}
function sampleTypeRowClick({ row }: any) {
  if (isEmpty(row)) {
    sltSampleType.value = {};
    purposeItemList.length = 0;
  } else {
    (proxy.$refs.sampleTypeTableRef as any).setCurrentRow(row);
    sltSampleType.value = row;
    findBacReqPurposeFeeItem();
  }
}

function findBacReqPurposeFeeItem() {
  if (!isEmpty(sltPurpose.value.purposeNo) && !isEmpty(sltSampleType.value.sampleTypeCode)) {
    findFeeItemList();
    findPurposeItemList();
  }
}

function feeItemRowClick({ row }: any) {
  if (isEmpty(sltPurpose.value) || isEmpty(sltSampleType.value)) {
    VxeMessage('请选择目的和样本类型', VxeNotifyType.error);
    return;
  }
  const url = '/api/sta/staReqPurposeFeeItem/addPurposeFeeItem';
  let purposeItem = {
    purposeNo: sltPurpose.value.purposeNo,
    purposeId: sltPurpose.value.id,
    sampleTypeCode: sltSampleType.value.sampleTypeCode,
    feeCode: row.feeCode,
    seq: purposeItemList.length + 1,
    orgId: store.userInfo.orgId
  };
  proxy.$http
    .post(url, purposeItem)
    .then((res: any) => {
      VxeMessage('成功', VxeNotifyType.success);
      findBacReqPurposeFeeItem();
    })
    .catch((err: any) => {
      proxy.$alert(err, '提示');
    });
}

function purposeItemRowClick({ row }: any) {
  const url = '/api/sta/staReqPurposeFeeItem/deletePurposeFeeItem';
  proxy.$http
    .post(url, row)
    .then((res: any) => {
      if (res.status.code === 1) {
        findBacReqPurposeFeeItem(); // 获取检验仪器表格数据
        VxeMessage('移除成功', VxeNotifyType.success);
      } else {
        VxeMessage(res.status.msg, VxeNotifyType.error);
      }
    })
    .catch((err: any) => {
      VxeMessage(err, VxeNotifyType.error);
    });
}

function deleteBatchPurposeItem() {
  const sltPurposeItems = (proxy.$refs.purposeItemTableRef as any).getCheckboxRecords();
  if (!(sltPurposeItems.length > 0)) {
    VxeMessage('请勾选要删除的数据', VxeNotifyType.info);
  } else {
    proxy
      .$confirm('确定要删除当前勾选的数据？', '提示', {
        cancelButtonClass: 'cancel-button',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(() => {
        const data = { bacReqPurposeFeeItemList: sltPurposeItems };
        const url = '/api/sta/staReqPurposeFeeItem/batchDeletePurposeItemList';
        proxy.$http
          .post(url, data)
          .then((res: any) => {
            if (res.status.code === 1) {
              findBacReqPurposeFeeItem(); // 获取检验仪器表格数据
              VxeMessage('删除成功', VxeNotifyType.success);
            } else {
              VxeMessage(res.status.msg, VxeNotifyType.error);
            }
          })
          .catch((err: any) => {
            VxeMessage(err, VxeNotifyType.error);
          });
      })
      .catch((err: any) => {
        // VxeMessage(err, VxeNotifyType.error);
      });
  }
}
</script>

<style lang="scss" scoped>
#purposeFeeItemDiv {
  height: 100%;
  .bodyContent {
    height: calc(100% - 60px);
    .splitpanes {
      background-color: $base-white;
      // 附加按钮间距
      .button-blue,
      .button-red {
        margin: 5px 0 5px 5px;
      }
      .tableBody {
        height: calc(100% - 40px);
      }
      .rightTable {
        height: calc(100% - 40px - 32px);
      }
      .msgDiv {
        margin-left: 5px;
        color: rgb(180, 28, 28);
      }
    }
  }
}
</style>

